"use client"

import { memo } from "react"
import { Handle, Position, NodeProps } from "reactflow"
import { Button } from "@/components/ui/button"
import { Trash2, type LucideIcon } from "lucide-react"
import { getNodeIcon } from "@/lib/get-node-icon"

export interface CustomNodeData {
  label: string
  type: string
  iconName?: string
  onDelete?: (id: string) => void
  config?: any
}

export const CustomNode = memo(({ id, data, selected }: NodeProps<CustomNodeData>) => {
  const Icon: LucideIcon = getNodeIcon({ type: data.type, config: data.config })

  // 根据节点类型设置不同的颜色
  const getNodeColor = () => {
    const colors: Record<string, string> = {
      trigger: "bg-blue-500/10 border-blue-500/50 text-blue-600",
      start: "bg-blue-500/10 border-blue-500/50 text-blue-600",
      llm: "bg-purple-500/10 border-purple-500/50 text-purple-600",
      knowledge: "bg-emerald-500/10 border-emerald-500/50 text-emerald-600",
      memory: "bg-emerald-500/10 border-emerald-500/50 text-emerald-600",
      planner: "bg-amber-500/10 border-amber-500/50 text-amber-600",
      code: "bg-orange-500/10 border-orange-500/50 text-orange-600",
      condition: "bg-pink-500/10 border-pink-500/50 text-pink-600",
      branch: "bg-pink-500/10 border-pink-500/50 text-pink-600",
      template: "bg-cyan-500/10 border-cyan-500/50 text-cyan-600",
      variable: "bg-cyan-500/10 border-cyan-500/50 text-cyan-600",
      http: "bg-indigo-500/10 border-indigo-500/50 text-indigo-600",
      api: "bg-indigo-500/10 border-indigo-500/50 text-indigo-600",
      tool: "bg-violet-500/10 border-violet-500/50 text-violet-600",
      end: "bg-gray-500/10 border-gray-500/50 text-gray-600",
    }
    return colors[data.type] || "bg-gray-500/10 border-gray-500/50 text-gray-600"
  }

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation()
    if (data.onDelete) {
      data.onDelete(id)
    }
  }

  return (
    <div
      className={`
        group relative px-4 py-3 rounded-lg border-2 bg-card shadow-sm
        transition-all duration-200
        ${selected ? "ring-2 ring-primary ring-offset-2 shadow-lg scale-105" : "hover:shadow-md"}
        min-w-[180px]
      `}
    >
      {/* 连接点 - 上 */}
      <Handle
        type="target"
        position={Position.Top}
        className="!w-3 !h-3 !bg-primary !border-2 !border-background transition-transform hover:scale-125"
      />

      {/* 连接点 - 左 */}
      <Handle
        type="target"
        position={Position.Left}
        className="!w-3 !h-3 !bg-primary !border-2 !border-background transition-transform hover:scale-125"
      />

      {/* 节点内容 */}
      <div className="flex items-center gap-3">
        <div className={`h-10 w-10 rounded-md ${getNodeColor()} flex items-center justify-center flex-shrink-0`}>
          <Icon className="h-5 w-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="font-medium text-sm truncate">{data.label}</div>
          <div className="text-xs text-muted-foreground capitalize">{data.type}</div>
        </div>
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
          onClick={handleDelete}
        >
          <Trash2 className="h-3.5 w-3.5" />
        </Button>
      </div>

      {/* 连接点 - 右 */}
      <Handle
        type="source"
        position={Position.Right}
        className="!w-3 !h-3 !bg-primary !border-2 !border-background transition-transform hover:scale-125"
      />

      {/* 连接点 - 下 */}
      <Handle
        type="source"
        position={Position.Bottom}
        className="!w-3 !h-3 !bg-primary !border-2 !border-background transition-transform hover:scale-125"
      />
    </div>
  )
})

CustomNode.displayName = "CustomNode"
